<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/ztree/zTreeStyle.css" />
</head>
<body>
	<form action="/three/role/list" method="post" id="form1" name="form1">
		<div class="pd-20">
			<div class="text-c">
				<input class="input-text" type="text" id="rname" name="rname"
					placeholder="角色名称" style="width: 250px;">
				<c:if test="${fn:contains(power,'role/list') }">
					<button type="submit" class="btn btn-primary">
						<i class="Hui-iconfont">&#xe665;</i>查询
					</button>
				</c:if>
				<button class="btn btn-primary" type="button" id="btn_reset">
					<i class="Hui-iconfont">&#xe68f;</i>重置
				</button>
			</div>
			<c:if test="${fn:contains(power,'role/save') }">
				<div class="cl pd-5 bg-1 bk-gray mt-20">
					<span class="l">
						<button class="btn btn-primary" id="btn_add" type="button">
							<i class="Hui-iconfont">&#xe600;</i> 角色新增
						</button>
					</span>
				</div>
			</c:if>
			<table
				class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th>角色名称</th>
						<th>角色类型</th>
						<th>角色状态</th>
						<th>编辑模式</th>
						<th>角色描述</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${roleList }" var="role">
						<tr class="text-c">
							<td>${role.roleName }</td>
							<td>${role.roleType }</td>
							<td>${role.status=='1'?'启用':'禁用' }</td>
							<td>${role.editMode=='1'?"可编辑":"只读" }</td>
							<td>${role.roleRemark }</td>
							<td class="f-14 user-manage">
							<c:if test="${fn:contains(power,'role/update') }">
									<a style="text-decoration: none"
										onclick='toupdate(${el:toJsonString(role)})' title="编辑"><i
										class="Hui-iconfont">&#xe6df;</i></a>
								</c:if> <c:if test="${fn:contains(power,'role/PowerRole') }">
									<a style="text-decoration: none" class="ml-5"
										onclick="user_menu('${role.roleId}')" title="菜单授权"> <i
										class="Hui-iconfont">&#xe667;</i></a>
								</c:if> <c:if test="${fn:contains(power,'role/pick') }">
									<a style="text-decoration: none" class="ml-5"
										onclick="user_role('${role.roleId}')" title="角色授权"> <i
										class="Hui-iconfont">&#xe60a;</i></a>
								</c:if> <c:if test="${fn:contains(power,'role/delete') }">
									<a style="text-decoration: none" class="ml-5"
										onclick='role_del(${el:toJsonString(role)})' title="删除"> <i
										class="Hui-iconfont">&#xe6e2;</i></a>
								</c:if></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">角色信息更新</h3>
						<a class="close" id="btn_gb" data-dismiss="modal"
							aria-hidden="true" href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="roleId" id="roleId" class="input-text" />
						<table
							class="table table-border table-bordered table-hover table-bg">
							<tr>
								<td>角色名称</td>
								<td><input type="text" name="roleName" id="roleName"
									class="input-text radius" value="" /></td>
							</tr>
							<tr>
								<td>角色类型</td>
								<td><input type="text" name="roleType"
									class="input-text radius" value="" /></td>
							</tr>
							<tr>
								<td>角色状态</td>
								<td><select name="status" class="input-text radius"
									style="width: 195px;">
										<option value="1">启用</option>
										<option value="0">禁用</option>
								</select></td>
							</tr>
							<tr>
								<td>编辑模式</td>
								<td><select name="editMode" class="input-text radius"
									style="width: 195px;">
										<option value="1">可编辑</option>
										<option value="0">只读</option>
								</select></td>
							</tr>
							<tr>
								<td>备注</td>
								<td><textarea name="roleRemark" rows="5" cols="65"
										class="textarea radius"></textarea></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_save">保存</button>
						<button class="btn" id="btn_close" data-dismiss="modal"
							aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 菜单授权 -->
		<div id="menuModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">菜单授权</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="menus" id="menus" class="input-text" />
						<input type="hidden" name="roleIds" id="roleIds"
							class="input-text" />
						<ul id="menuTree" class="ztree" style="margin-left: 100px;"></ul>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_menu">保存</button>
						<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 角色授权 -->
		<div id="roleModal" class="modal fade" tabindex="-1" role="dialog"
			style="width: 1200px" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog" style="width: 1000px;">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">角色授权</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="ids" id="ids" class="input-text" />
						<table class="table table-border table-bordered table-bg" id="tab">
							<tr>
								<td>组织机构</td>
								<td>待选用户列表</td>
								<td>操作</td>
								<td>已选用户列表</td>
							</tr>
							<tr>
								<td>
									<ul id="deptTree" class="ztree"
										style="background-color: white; margin-top: -9px; margin-left: -8px; margin-bottom: -9px; margin-right: -24px;"></ul>
								</td>
								<td>
									<table class="table table-border table-bordered table-bg"
										id="userTable1">
										<tr>
											<td><input type="checkbox" name="noUser" id="noUser" />
											</td>
											<td>用户账号</td>
											<td>用户名</td>
											<td>所属机构</td>
										</tr>
									</table>
								</td>
								<td>
									<button type="button" class="btn btn-primary" id="pick">选中</button>
									<br /> <br />
									<button type="button" class="btn btn-primary" id="cancel">撤销</button>
								</td>
								<td>
									<table class="table table-border table-bordered table-bg"
										id="userTable2">
										<tr>
											<td><input type="checkbox" name="yesUser" id="yesUser" /></td>
											<td>用户账号</td>
											<td>用户名</td>
											<td>所属机构</td>
										</tr>

									</table>
								</td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript"
	src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript"
	src="/three/static/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript"
	src="/three/static/ztree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/three/static/formEdit.js"></script>
<script type="text/javascript"
	src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript"
	src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"pading":false,
	/* "aoColumnDefs": [
	  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
	] */
});
$("#form1").validate({
	rules:{
		roleName:{
			required:true,
			minlength:2,
			maxlength:16
		}
	},
	onkeyup:false,
	focusCleanup:true
});
/*删除角色*/
function role_del(role){
	if(role.editMode == "0") {
		alert("该角色已禁用,不能删除!");
	} else {
		$("#form1").attr("action", "/three/role/delete?roleId=" + role.roleId);
		$("#form1").submit();
	}
}
/*用户赋权开始*/
function user_role(roleId) {
	$("#ids").val(roleId);
	$(".yesUser").remove();
	$(".noUser").remove();
	$("#yesUser").remove();
	$("#noUser").remove();
	$.ajax({
		type: 'POST',
		dataType: "json",
		url: "/three/dept/tooDept", //请求的action路径  
		async: false,
		success: function(data) {
			var setting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "deptId",
						pIdKey: "parentId",
						rootPId: 0
					},
					key: {
						name: "deptName",
					}
				},
				callback: {
					onClick: onClick
				}

			}
			$(document).ready(function() {
				$.fn.zTree.init($("#deptTree"), setting, data);
				refreshTree("deptTree");
				expandAll("deptTree");
			});
			var zNodes = data;
			$.ajax({
				type: 'POST',
				dataType: "json",
				url: "/three/role/selectnoUsers",
				async: false,
				success: function(obj) {
					if(obj != null && obj != "") {
						$.each(obj, function(index, msg) {
							$("#userTable1").append('<tr class="yesUser"><td><input type="checkbox" name="noUsers" value="' + msg.userID + '" /></td><td>' + msg.account + '</td><td>' + msg.username + '</td><td>' + msg.deptname + '</td></tr>');
						});
					}
				}
			});
			$.ajax({
				type: 'POST',
				dataType: "json",
				url: "/three/role/selectyesUsers", //请求的action路径  
				data: {
					roleId: roleId
				},
				async: false,
				success: function(obj) {
					if(obj != null && obj != "") {
						$.each(obj, function(index, msg) {
							$("#userTable2").append('<tr class="noUser"><td><input type="checkbox" name="yesUsers" value="' + msg.userID + '" /></td><td>' + msg.account + '</td><td>' + msg.username + '</td><td>' + msg.deptname + '</td></tr>');
						});
					}

				}
			});
			$("#roleModal").modal("show");
		}
	});
}
/*用户赋权结束*/
/*树节点点击事件*/
function onClick(e, treeId, treeNode) {
	$("#userTable1 tr").not(':eq(0)').empty();
	var zTree = $.fn.zTree.getZTreeObj("deptTree"),
		nodes = zTree.getSelectedNodes(),
		ids = "";
	nodes.sort(function compare(a, b) {
		return a.id - b.id;
	});
	for(var i = 0, l = nodes.length; i < l; i++) {
		ids += nodes[i].deptId + ",";
	}
	if(ids.length > 0) ids = ids.substring(0, ids.length - 1);
	$.ajax({
		type: 'POST',
		dataType: "json",
		url: "/three/role/clickZtree", 
		data: {
			deptId: ids
		},
		async: false,
		success: function(obj) {
			if(obj != null && obj != "") {
				$.each(obj, function(index, msg) {
					$("#userTable1").append('<tr class="yesUser"><td><input type="checkbox" name="noUsers" value="' + msg.userID + '" /></td><td>' + msg.account + '</td><td>' + msg.username + '</td><td>' + msg.deptname + '</td></tr>');
				});
			}
		}
	});
}
/*树节点点击事件*/
/*菜单授权的下拉树开始*/
function user_menu(roleId) {
	$("#roleIds").val(roleId);
	/*ztree树的生成*/
	$.ajax({
		type: 'POST',
		dataType: "json",
		url: "/three/role/menuPower",
		data: {
			roleId: roleId
		},
		async: false,
		success: function(data) {
			var setting = {
				check: {
					enable: true
				},
				data: {
					key: {
						title: "menuName",
						name: "menuName",
						url: "notexists"
					},
					simpleData: {
						enable: true,
						idKey: "menuId",
						pIdKey: "parentId",
						rootPId: 0
					}
				}
			}
			$(document).ready(function() {
				$.fn.zTree.init($("#menuTree"), setting, data);
				refreshTree("menuTree");
			});
		}
	});
	/*ztree树的生成结束*/
	$("#menuModal").modal("show");
}
/*菜单授权的下拉树结束*/

/*点击菜单赋权的保存开始*/
$("#btn_menu").click(function() {
	var menus = GetIDs();
	$("#menus").val(menus);
	$("#form1").attr("action", "/three/role/PowerRole");
	$("#form1").submit();
});
/*点击角色赋权的保存结束*/

function GetIDs() {//获取menuTree选中的菜单
	var treeObj = $.fn.zTree.getZTreeObj("menuTree"),
		nodes = treeObj.getCheckedNodes(true),
		v = "";
	for(var i = 0; i < nodes.length; i++) {
		v += nodes[i].menuId + ",";
	}
	return v;
}

/*点击撤销的操作开始*/
$("#cancel").click(function() {
	//将数据带到后台进行操作
	var ids = $("#ids").val();
	var checkusers = "";
	var tablecheck = $("#userTable2 tr:gt(0)").find("input[type='checkbox']:checked");
	if(tablecheck.length != 0) {
		$.each(tablecheck, function(index, obj) {
			checkusers += obj.value + ",";
		});

		$.ajax({
			type: 'POST',
			dataType: "text",
			url: "/three/role/cancel", //请求的action路径  
			data: {
				ids: ids,
				checkusers: checkusers
			},
			async: false,
			success: function(info) {
				//实现页面上的两个table交换"
				var check = $("#userTable2 tr:gt(0)").find("input[type='checkbox']:checked").parent().parent();
				if(check.length != 0) {
					$.each(check, function(index, msg) {
						$(msg).clone().appendTo('#userTable1');
						$(msg).remove();
					});
					$("#tab").find("input[type='checkbox']").prop("checked", false);
				}
				alert(info);
			}
		});

	} else {
		alert("请选择用户！！！");
	}
});
/*点击撤销的操作结束*/
 
/*点击选中的操作开始*/
$("#pick").click(function() {
	//将数据带到后台进行操作
	var ids = $("#ids").val();
	var checkusers = "";
	var tablecheck = $("#userTable1 tr:gt(0)").find("input[type='checkbox']:checked");
	if(tablecheck.length != 0) {
		$.each(tablecheck, function(index, obj) {
			checkusers += obj.value + ",";
		});

		$.ajax({
			type: 'POST',
			dataType: "text",
			url: "/three/role/pick",
			data: {
				ids: ids,
				checkusers: checkusers
			},
			async: false,
			success: function(info) {
				var check = $("#userTable1 tr:gt(0)").find("input[type='checkbox']:checked").parent().parent();
				if(check.length != 0) {
					$.each(check, function(index, msg) {
						$(msg).clone().appendTo('#userTable2');
						$(msg).remove();
					});
					$("#tab").find("input[type='checkbox']").prop("checked", false);
				}
				alert(info);
			}
		});

	} else {
		alert("请选择用户！！！");
	}
});

function refreshTree(treeId) {
	var zTree = $.fn.zTree.getZTreeObj(treeId),
	type = "refresh",
	silent = false,
	nodes = zTree.getSelectedNodes();
	zTree.reAsyncChildNodes(nodes[0], type, silent);
}

/*点击添加*/
$("#btn_add").click(function() {
	$(".input-text").val("");
	$(".textarea").val("");
	$("#myModal").modal("show");
});
/*点击重置*/
$("#btn_reset").click(function() {
	$("#rname").val("");
});

$("#btn_gb,#btn_close").click(function() {
	$(".input-text").val("");
	$(".textarea").val("");
});
/*修改*/
function toupdate(role){
	$("#form1").formEdit(role);
	$("#myModal").modal("show");
}
/*点击保存*/
$("#btn_save").click(function() {
	var roleVal=$("#roleId").val();
	if(roleVal==''){
		document.form1.action="/three/role/save";
		document.form1.submit();
	}else{
		document.form1.action="/three/role/update";
		document.form1.submit();
	}
});

/*判断角色名称是否存在*/
$("#roleName").on("blur",function(){
	$.ajax({
		type: "POST",
		url: "/three/role/checkName",
		dataType: "text",
		async: false,
		data: {
			roleName: $("#roleName").val()
		},
		success: function(msg) {
			if(msg=='error'){
				alert("该角色名称已存在!!!");
				$("#roleName").val("");
			}
		}
	});		
});
/* ztree的自动展开功能开始 */
var curStatus = "init",
	curAsyncCount = 0,
	asyncForAll = false,
	goAsync = false;

function expandAll(did) {
	var zTree = $.fn.zTree.getZTreeObj(did);
	if(asyncForAll) {
		zTree.expandAll(true);
	} else {
		expandNodes(zTree.getNodes(), did);
		if(!goAsync) {
			curStatus = "";
		}
	}
}

function expandNodes(nodes, id) {
	if(!nodes)
		return;
	curStatus = "expand";
	var zTree = $.fn.zTree.getZTreeObj(id);
	for(var i = 0, l = nodes.length; i < l; i++) {
		zTree.expandNode(nodes[i], true, false, false);
		if(nodes[i].isParent && nodes[i].zAsync) {
			expandNodes(nodes[i].children, id);
		} else {
			goAsync = true;
		}
	}
}
</script>
</html>